import { CloseOutlined } from "@ant-design/icons";
import DarkCard from "../../../../../../common/DarkCard";
import { Descriptions, Button } from "antd";
import biaoge from "../../../Zhpg/Yxfx/YxfxXq/biaoge";
import { useState, useEffect } from "react";
import Api from "../../../../../../../utils/api";
import cztxl from "../../../../../manager/newPages/NewCzt/cztxl";
import jzzyxl from "../../../../../manager/newPages/NewJzzy/jzzyxl";
export default function CztXqList(props) {
    const { cztXqList, cztfx } = props;
    const data = { ...cztXqList, ...JSON.parse(cztXqList?.xq) }

    console.log('data', data, '@', cztfx)
    const [data1, setData1] = useState()
    const btzd = biaoge();

    useEffect(() => {

        Api.getConfig().then(resp => {
            if (cztfx) {
                const targetTemplate = cztxl[cztfx]?.templates || resp?.detailTemplate?.[`${cztfx}`];
                setData1(targetTemplate)
            }


        })
    }, [cztfx])
    return <>
        <DarkCard style={{
            position: 'absolute',
            right: '10px',
            width: '300px',
            top: '20px',
            bottom: '20px',
            pointerEvents: 'auto',
            borderRadius: 8,
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                borderBottom: "1px solid #eee",
                paddingBottom: 12,
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>{cztXqList?.title}</div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                    }} onClick={e => {
                        props?.onClose?.()
                    }} />
                </div>

            </div>
            <Descriptions column={1} bordered size="large" className="fill h0" style={{
                overflow: 'auto'
            }}>
                {
                    data1?.map((item, value) => {
                        return (
                            <Descriptions.Item label={item.alias || item.title}>{data?.[`${item.name || item.dataIndex}`]}</Descriptions.Item>
                        )
                    })
                }

            </Descriptions>
        </DarkCard>
    </>

}